
{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase
-%}
{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
  endcase
%}
<link rel="stylesheet" href="{{ 'featured-product-index.min.css' | asset_url }}">
<div class="{% if show_padding %}py-section{% else %}my-section{% endif %} {{ background_color }}">
  <input class="as-featured-product-script" type="hidden" value="{{ 'featured-product.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="container {{ text_color }}">
    <product-recommendations class="product-recommendations as-get-recommendations" data-link="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4">
      {% if recommendations.performed and recommendations.products_count > 0 %}
        <h2 class="mb-6">{{ section.settings.heading | escape }}</h2>
        <div class="row row-cols-2 row-cols-lg-4 gy-6 gy-lg-7 gx-4">
          {% for recommendation in recommendations.products %}
            <div class="col">
              {% render 'product-card-featured',
                product_card_product: recommendation,
                media_size: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                add_image_padding: section.settings.add_image_padding,
                show_vendor: section.settings.show_vendor,
                btn_style: btn_style,
                text_color: text_color,
                forloop: forloop
              %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </product-recommendations>
  </div>
</div>

{% javascript %}
  (function() {
    var $url = document.querySelector('.as-featured-product-script')
    if (!window.featuredProduct && $url && $url.dataset.designMode !== 'yes') {
      window.featuredProduct = $url.value

      var $script = document.createElement('script')
      $script.src = window.featuredProduct
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% schema %}
{
  "name": "Product recommendations",
  "tag": "section",
  "class": "spaced-section as-featured-collection",
  "settings": [
    {
      "type": "paragraph",
      "content": "Dynamic recommendations use order and product information to change and improve over time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "Heading"
    },
    {
      "type": "select",
      "id": "text_color",
      "options": [
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "black",
      "label": "Text color"
    },
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "header",
      "content": "PRODUCT CARD"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt to image"
        },
        {
          "value": "4x5",
          "label": "Portrait"
        },
        {
          "value": "1x1",
          "label": "Square"
        }
      ],
      "default": "adapt",
      "label": "Image shape"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "Show second image on hover"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "Add image padding"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "Show vendor"
    }
  ]
}
{% endschema %}
